<% crumbs 'Edit territories' => edit_territories_path %>
<% content_for(:title, 'Edit territories') %>
<%# Extra js imports for the map stuff %>
<% content_for(:head, javascript_include_tag('delaunay.js')) %>
<% content_for(:head, javascript_include_tag('voronoi.js')) %>
<% content_for(:head, javascript_include_tag('mapEditor.js')) %>
<% content_for(:head) do %>
  <script type="text/javascript">
    var territories = [];
    var territory_colors  = [];
    var current_territory = false;
    var dragging=false;
    <%  @territories.each do |t| -%>
      <%if(t.position_x and t.position_y) -%>
        territories[<%= t.id %>] = new Vertex(<%= "#{t.position_x}, #{t.position_y}" %>);
        <%if(t.clan ) -%>
        territory_colors[<%= t.id %>] = [<%= t.clan.color_rgb.join(',') %>];
        <% end -%>
      <% end -%>
    <% end -%>

    function click(e) {
      var cx = (e.clientX - e.currentTarget.offsetLeft + pageXOffset);
      var cy = (e.clientY - e.currentTarget.offsetTop + pageYOffset);
      var one_near = false; // if you're trying to place a territory near another one
      var was_dragging = dragging;
      for( var t = 0; t < territories.length; t++ ) {
        if(territories[t]){
          var dx = (territories[t].x - cx);
          var dy = (territories[t].y - cy);
          if(!dragging){
            if((dx*dx + dy*dy) < 64 ) {
              $$('#select-'+ t +" a")[0].onclick();
              dragging = true;
            }
          } else {
            if(t != current_territory && (dx*dx + dy*dy) < 64 ) {
              one_near = true
              break;
            }
          }
        }
      }
      if (was_dragging && !one_near) {
        $('territory_position_x').value = cx;
        $('territory_position_y').value = cy;
        updatePaths(territories);
        <%#*$('territory_shape').value = getVoronoiPath(territories[current_territory], triangle_cache);%>
        dragging = false;
      }
      renderTerritories( $('canvas'), territories );
    }

    function move(e){
      var cx = (e.clientX - e.currentTarget.offsetLeft + pageXOffset);
      var cy = (e.clientY - e.currentTarget.offsetTop + pageYOffset);
      
      if(current_territory && dragging) {
        territories[current_territory] = new Vertex(cx, cy);
      }
      renderTerritories( $('canvas'), territories );
    }

    Event.observe(window, 'load', function() {
      Event.observe($('canvas'), 'click', click);
      Event.observe($('canvas'), 'mousemove', move);
      renderTerritories($('canvas'), territories );
    });

  </script>
<% end %>

<div id="territories-toos">
  <% border 'border3' do %>
      <div id="tools-form-container">
        <p>Select a territory from the list to edit it, or create a new one.</p>
      </div>
  <% end %>
</div>
<div id="map-container" >
  <% border 'border4' do %>
    <canvas id="canvas" width="500" height="350" ></canvas>
  <% end %>
  <%= image_tag 'cc_panel_bottom.png', :id => 'map-bottom'%>
</div>
<div id="territories-edit-list" >
  <% border 'border3' do %>
    <div style="text-align:right;">
      <%= link_to_remote 'New territory',
                         :url => {:controller => :territories, :action => :create},
                         :update => {:success => 'territories-list'}%>
    </div>
    <div id="territories-list">
      <%= render :partial => 'list', :locals => {:territories => @territories} %>
    </div>
  <% end %>
</div>